<template>
 <div class="g-rowl1 styl2">
   <div class="g-topb1">
    <div class="ll">
      <div class="g-titb1">
        <div class="h3">技术服务</div>
      </div>
    </div>
    <div class="rr">
      <router-link to="/" class="g-btnb1">
        <img src="@img/b-i1.png" alt="" class="icn" />
        <span>返回首页</span>
      </router-link>
    </div>
    <img src="@img/b-line1.png" alt="" class="line" />
  </div>
  <div class="content">
    <div class="g-fillter styl1">
      <div class="item">
        <div class="s">服务时间</div>
        <a-range-picker
            v-model:value="value1"
            :bordered="false"
            inputReadOnly
            separator="至"
          />
      </div>
      <div class="opts">
        <div class="btn">
          <img src="@img/c-btn2.svg" alt="" />
        </div>
        <div class="btn"><img src="@img/c-btn3.png" alt="" /></div>
      </div>
    </div>
    <div class="col-l">
      <div class="g-content">
        <div class="m-tableb1 flex1 jl-table tabl1">
          <a-table
            bordered
            :dataSource="dataSource"
            :columns="columns"
             :scroll="{ x: 1205, y: 625 }"
            :pagination="false"
            :row-class-name="
              (_record, index) => (index % 2 === 1 ? 'table-striped' : null)
            "
          >
            <template #bodyCell="{ column,text, record }">
              <template v-if="column.dataIndex === 'state'">
                <div class="type">
                  <span class="btn sty1" v-if="text==1">已发布</span>
                  <span class="btn sty2" v-if="text==0">未发布</span>
                </div>
              </template>
              <template v-if="column.dataIndex === 'action'">
                <div class="actions">
                  <a @click="handleAction(record, 0)" v-if="text==1">撤销</a>
                  <a @click="handleAction(record, 1)" v-if="text==0">发布</a>
                  <a @click="handleDelete(record)">删除</a>
                </div>
              </template>
            </template>
          </a-table>
        </div>
        <div class="con-bot">
          <div class="l">
            <div class="add" @click="showModal"><span>+</span>新建</div>
          </div>
          <div class="r">
            <div class="g-pages">
              <a-pagination
                v-model:current="current"
                v-model:page-size="pageSize"
                :total="1309"
                showQuickJumper
                :show-total="
                  (total, range) =>
                    `显示${range[0]}到${range[1]} ,共 ${total} 条记录`
                "
              ></a-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-r">
      <div class="m-handlell" :style="'background-image: url(' + getImageUrl('warnbgl2.png') + ');'">
        <div class="m-titl1">
          <div class="tit">服务节点</div>
          <div class="add" @click="showModal2"><em>+</em>新建</div>
        </div>
        <div class="m-servel">
          <div class="item">
            <div class="time">2024-08</div>
            <ul class="ul-listl6">
              <li v-for="(item,index) in listl2" :key="index">
                <div class="con">
                  <div class="top">
                    <div class="date">{{item.date}}</div>
                    <div class="tit">{{item.tit}}</div>
                  </div>
                  <div class="desc">{{item.desc}}</div>
                  <div class="picbox">
                    <div class="pic">
                      <div class="img" :style="'background-image: url(' + item.scr1 + ');'"></div>
                    </div>
                    <div class="pic">
                      <div class="img" :style="'background-image: url(' + item.scr2 + ');'"></div>
                    </div>
                    <div class="pic">
                      <div class="img" :style="'background-image: url(' + item.scr3 + ');'"></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <div class="item">
            <div class="time">2024-07</div>
            <ul class="ul-listl6">
              <li v-for="(item,index) in listl2" :key="index">
                <div class="con">
                  <div class="top">
                    <div class="date">{{item.date}}</div>
                    <div class="tit">{{item.tit}}</div>
                  </div>
                  <div class="desc">{{item.desc}}</div>
                  <div class="picbox">
                    <div class="pic">
                      <div class="img" :style="'background-image: url(' + item.scr1 + ');'"></div>
                    </div>
                    <div class="pic">
                      <div class="img" :style="'background-image: url(' + item.scr2 + ');'"></div>
                    </div>
                    <div class="pic">
                      <div class="img" :style="'background-image: url(' + item.scr3 + ');'"></div>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
 </div>
<!-- 新建技术服务弹窗 -->
<a-modal class="m-popl1 popl3" v-model:visible="visible" :centered="true" :footer="null" :style="'background-image: url(' + getImageUrl('popbgl3.png') + ');'">
  <div class="top">
    <div class="g-titl2">
      <div class="tit"><i></i>新建技术服务</div>
    </div>
  </div>
  <div class="m-forml">
    <form action="">
      <div class="tips">
        <span>报送单位: 青岛市畜牧工作站</span>
        <span>填报日期: 2024年6月20日</span>
      </div>
      <div class="form">
        <div class="item">
          <div class="tt">下乡次数(次)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">下乡人数(人次)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">服务指导农户数(个)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">指导服务面积(养殖)数</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">(亩数、头/只数)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">推宣政策(项)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">推广主推技术(模式)(项)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">推广应用(亩数、头/只数)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">推介主推品种(个)、</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">推介应用(亩数、头/只数)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">推用新装备(台、套)、</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
        <div class="item">
          <div class="tt">装备应用(亩数、头/只数)</div>
          <div class="rr">
            <input type="text" class="inp" placeholder="请输入数量">
          </div>
        </div>
      </div>
      <div class="jl-action">
        <div class="btn sty1" @click="handleOk">取消</div>
        <div class="btn sty2" @click="handleOk">确定</div>
      </div>
    </form>
  </div>
</a-modal>
<!-- 新建节点弹窗 -->
<a-modal class="m-popl1 popl4" v-model:visible="visible2" :centered="true" :footer="null" :style="'background-image: url(' + getImageUrl('popbgl4.png') + ');'">
  <div class="g-titl2">
    <div class="tit"><i></i>新建</div>
  </div>
  <div class="m-forml2">
    <form action="">
      <div class="form">
        <div class="item">
          <div class="tt">标题</div>
          <input type="text" class="inp" placeholder="请输入标题">
        </div>
        <div class="item">
          <div class="tt">时间</div>
          <input type="text" class="inp" placeholder="请输入时间">
        </div>
        <div class="item">
          <div class="tt">介绍文本</div>
          <textarea class="textarea" placeholder="请输入标题"></textarea>
        </div>
        <div class="item">
          <div class="tt">添加图片</div>
          <div class="box">
            <a-upload
              v-model:file-list="fileList"
              name="file"
              action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
              listType="picture-card"
						  :maxCount="3"
              >
              <plus-outlined />
              <div class="icon" v-if="fileList.length < 3"><img src="@img/jl-i07.png" alt="" /></div>
            </a-upload>
          </div>
        </div>
      </div>
      <div class="jl-action">
        <div class="btn sty1" @click="handleOk2">取消</div>
        <div class="btn sty2" @click="handleOk2">确定</div>
      </div>
    </form>
  </div>
</a-modal>

</template>
<script setup>
import { defineComponent, computed, toRefs, reactive, ref, onMounted } from 'vue';
import { message } from 'ant-design-vue';
function getImageUrl (name) {
  return new URL(`../assets/images/${name}`, import.meta.url).href;
}

const value1 = ref();
const current = ref(1);
const pageSize = ref(8);

const columns = [
  {
    title: '服务名称',
    dataIndex: 'name',
    key: 'name',
    width: 224
  },
  {
    title: '填报时间',
    dataIndex: 'time',
    key: 'time',
    width: 118
  },
  {
    title: '报送单位',
    dataIndex: 'unit',
    key: 'unit',
    width: 155
  }, {
    title: '下乡次数(次)',
    dataIndex: 'num',
    key: 'num',
    width: 117
  }, {
    title: '下乡人数(人)',
    dataIndex: 'num2',
    key: 'num2',
    width: 131
  }, {
    title: '服务指导农户数(个)',
    dataIndex: 'num3',
    key: 'num3',
    width: 141
  }, {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    width: 183
  }, {
    title: '状态2',
    dataIndex: 'state2',
    key: 'state2',
    width: 183
  }, {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 138,
    fixed: 'right',
  },
];

const dataSource = ref([
  {
    key: '1',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 1,
    state2: 1,
    action: 1,
  },{
    key: '2',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 1,
    state2: 1,
    action: 1,
  },{
    key: '3',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 1,
    state2: 1,
    action: 1,
  },{
    key: '4',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 1,
    state2: 1,
    action: 1,
  },{
    key: '5',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 1,
    state2: 1,
    action: 1,
  },{
    key: '6',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 1,
    state2: 1,
    action: 1,
  },{
    key: '7',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 0,
    state2: 1,
    action: 0,
  },{
    key: '8',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 0,
    state2: 1,
    action: 0,
  },{
    key: '9',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 0,
    state2: 1,
    action: 0,
  },{
    key: '10',
    name: '青岛移风蔬菜批发市场有限公司',
    time: '2023/10/16',
    unit: '青岛市畜牧工作站',
    num: '3',
    num2: '12',
    num3: '100',
    state: 0,
    state2: 1,
    action: 0,
  }
]);

const handleAction = (record, action) => {
  const index = dataSource.value.findIndex(item => item.key === record.key);
  if (index !== -1) {
    dataSource.value[index].action = action;
    dataSource.value[index].state = action;
    message.success('操作成功');
  }
};
const handleDelete = (record) => {
  const index = dataSource.value.findIndex(item => item.key === record.key);
  if (index !== -1) {
    dataSource.value.splice(index, 1);
    message.success('操作成功');
  }
};

const listl2 = ref([
  {
    date: '2024/08/10',
    tit: '标题名称',
    time: '2023/10/16',
    desc: '技术服务作为现代社会的一个重要组成部分，不仅在企业发展中发挥着重要作用，也为个人提供了重要的支持和帮助。技术服务的类型、形式和发展趋势也在不断演变和创新，未来技术服务行业将呈现数字化、智能化、信息化的发展趋势。',
    scr1: getImageUrl('imgl9.jpg'),
    scr2: getImageUrl('imgl9.jpg'),
    scr3: getImageUrl('imgl9.jpg'),
  },
  {
    date: '2024/08/10',
    tit: '标题名称',
    time: '2023/10/16',
    desc: '技术服务作为现代社会的一个重要组成部分，不仅在企业发展中发挥着重要作用，也为个人提供了重要的支持和帮助。技术服务的类型、形式和发展趋势也在不断演变和创新，未来技术服务行业将呈现数字化、智能化、信息化的发展趋势。',
    scr1: getImageUrl('imgl9.jpg'),
    scr2: getImageUrl('imgl9.jpg'),
    scr3: getImageUrl('imgl9.jpg'),
  }
]);

// 新建技术服务弹窗
const visible = ref(false);
const showModal = () => {
  visible.value = true;
};
function handleOk(){
	visible.value=false;
};
// 新建节点弹窗
const visible2 = ref(false);
const showModal2 = () => {
  visible2.value = true;
};
function handleOk2(){
	visible2.value=false;
};

// 上传图片
const fileList= ref([]);
const RowKeys = ref([]);
const rowSelection = {
	selectedRowKeys: RowKeys,
	onChange: (selectedRowKeys,selectedRows) => {
		RowKeys.value=selectedRowKeys;
	},
	onSelectAll: (selected, selectedRows, changeRows) => {
	},
};

onMounted(() => {
  console.log('mounted');
});

</script>
